<template>
	<view class="flex-col section">
		<!-- rest , reserved -->
		<view class="state rest" :class="[info.status === 1? 'rest' : 'reserved']">
			<text class="txt">{{info.status === 1 ? '可租' : '占用'}}</text>
		</view>
		<view class="flex-row group_3 space-x-16">
			<image class="image_4" :src="info.image" mode="aspectFill" />
			<view class="flex-col items-start flex-auto">
				<text class="font_2 text_3 name clamp">{{`${info.brand_name} ${info.model_name}` }}</text>
				<view class="font_3 text_4">
				  {{`${info.gear_name} | ${info.seat_name} | ${info.pailiang}` }}
		          <text v-if="info.banben">{{`| ${info.banben}`}}</text>
				</view>
				<view class="chepai">
					{{info.chepai}}
				</view>
				<view class="group_4">
					<text class="font_1">￥</text>
					<text class="font_4">{{info.price}}</text>
					<text class="font_5">(日)</text>
					<!-- <text class="font_6 text_5">/￥168(节)</text> -->
				</view>
			</view>
		</view>
		<!-- 
		<view class="flex-row group_5 view">
			<view class="flex-col justify-start items-center text-wrapper"><text class="font_7 text_6">送车上门</text></view>
			<view class="flex-col justify-start items-center text-wrapper"><text class="font_7 text_6">自行取还</text></view>
			<view class="flex-col justify-start items-center text-wrapper"><text class="font_7 text_6">免费留车</text></view>
			<view class="flex-col justify-start items-center text-wrapper"><text class="font_7 text_6">24小时营业</text></view>
		</view>
		 -->
		<view class="flex-row justify-between items-center group_6">
			<text class="font_9 text_8 clamp">{{info.store_name}}</text>
			<view class="flex-row space-x-51">
				<!-- 
				<view class="flex-row items-center space-x-9" @click="del">
					<image class="shrink-0 image_5" src="/static/car-del.png" />
					<text class="font_10">删除</text>
				</view>
				 -->
				<view class="flex-row items-center space-x-9" @click="navTo('/pages/car/carHandle/index',{id:info.id})">
					<image class="shrink-0 image_6" src="/static/car-edit.png" />
					<text class="font_10">编辑</text>
				</view>
				
				<view class="flex-row items-center space-x-9" @click="navTo('/pages/car/carPrice/index',{id:info.id})">
					<image class="shrink-0 image_5" src="/static/car_jia.png" />
					<text class="font_10">价格</text>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script lang="ts">
import {
	defineComponent,
	watchEffect,
	reactive,
	toRefs,
	// computed
	// watch,
	// nextTick,
	// ref,
} from 'vue';
// import { onReachBottom,onLoad } from "@dcloudio/uni-app";
const carItem = defineComponent({
	props: {
		info: {
			type: Object,
			default: () => ({})
		}
	},
	setup(props: any, ctx: any) {
		const data: any = reactive({
			info: {}
		});
		watchEffect(() => {
			data.info = props.info;
		});

		return {
			...toRefs(data)
		};
	}
});
export default carItem;
</script>

<style lang="scss" scoped>
.name{
	max-width: 220rpx;
}
.section {
	padding-top: 40rpx;
	background-color: #ffffff;
	border-radius: 10rpx;
	border: solid 2rpx #f1f3fb;
	margin-bottom: 30rpx;
	position: relative;
	.state{
		position: absolute;
		top: 44rpx;
		right: 23rpx;
		&.rest{
			color: #3E6FEF;
		}
		&.reserved{
			color: #FF8420;
		}
		.txt{
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			
		}
	}
	.group_3 {
		padding: 0 27rpx;
		position: relative;
		.image_4 {
			width: 268rpx;
			height: 146rpx;
			border-radius: 10rpx;
			flex-shrink: 0;
		}
		.font_2 {
			font-size: 30rpx;
			font-family: PingFang;
			color: #333333;
		}
		.font_3 {
			font-size: 24rpx;
			font-family: PingFang;
			color: #666666;
			line-height: 32rpx;
		}
		.text_4 {
			margin-left: 3rpx;
			margin-top: 19rpx;
		}
		.chepai{
			margin-left: 3rpx;
			margin-top: 19rpx;
			font-size: 24rpx;
			color:#666;
		}
		.group_4 {
			// margin-top: 24rpx;
			position: absolute;
			right: 23rpx;
			bottom: 0rpx;
			.font_1 {
				font-size: 24rpx;
				font-family: PingFang;
				color: #ef592c;
			}
			.font_4 {
				font-size: 36rpx;
				font-family: PingFang;
				color: #ef592c;
			}
			.font_5 {
				font-size: 24rpx;
				font-family: PingFang;
				color: #ef592c;
			}
			.font_6 {
				font-size: 24rpx;
				font-family: PingFang;
				color: #999999;
			}
		}
	}
	.space-x-16 {
		& > view:not(:first-child),
		& > text:not(:first-child),
		& > image:not(:first-child) {
			margin-left: 16rpx;
		}
	}
	.group_5 {
		padding: 0 38rpx;
		.text-wrapper {
			padding: 14rpx 0;
			background-color: #f1f5ff;
			border-radius: 4rpx;
			padding: 0 ;
			height: 48rpx;
			.font_7 {
				font-size: 22rpx;
				font-family: PingFang;
				color: #3e6fef;
			}
		}
		.text-wrapper_2 {
			padding: 14rpx 0;
			background-color: #f1f5ff;
			border-radius: 4rpx;
			height: 48rpx;
			.text_7 {
				margin-left: 17rpx;
				margin-right: 12rpx;
			}
		}
		.view_2 {
			margin-right: 48rpx;
		}
		.font_8 {
			font-size: 22rpx;
			font-family: PingFang;
			color: #3e6fef;
		}
	}
	.view {
		margin-top: 6rpx;
	}
	.group_6 {
		margin-top: 21rpx;
		padding: 30rpx 29rpx 30rpx 33rpx;
		border-top: solid 2rpx #0000000f;
		.font_9 {
			font-size: 28rpx;
			font-family: PingFang;
			color: #3e6fef;
		}
		.text_8 {
			max-width: 400rpx;
		}
		.space-x-51 {
			& > view:not(:first-child),
			& > text:not(:first-child),
			& > image:not(:first-child) {
				margin-left: 51rpx;
			}
			.space-x-9 {
				& > view:not(:first-child),
				& > text:not(:first-child),
				& > image:not(:first-child) {
					margin-left: 9rpx;
				}
				.image_5 {
					width: 34rpx;
					height: 32rpx;
				}
				.font_10 {
					font-size: 24rpx;
					font-family: PingFang;
					color: #333333;
				}
				.image_6 {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}
}
</style>
